<template>
    <div class="container">
        <h1 class="tip">确认挂号信息</h1>
        <!-- 展示就诊人信息 -->
        <el-card class="box-card">
            <!-- 卡片头部信息 -->
            <template #header>
                <div class="card-header">
                    <span>请确认就诊人</span>
                    <el-button type="primary" size="default" @click="goUser">添加就诊人</el-button>
                </div>
            </template>
            <!-- 卡片：展示就诊人信息 -->
            <div class="user">
                <Visitor @click="changeIndex(index)" v-for="(user, index) in userArr" :key="user.id" class="item"
                    :user="user" :currentIndex="currentIndex" :index="index"></Visitor>

            </div>
        </el-card>

        <!-- 卡片：展示医生的信息 -->
        <el-card class="box-card">
            <!-- 卡片的头部 -->
            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>

                </div>
            </template>
            <!-- 卡片的身体部分 -->
            <el-descriptions class="margin-top" :column="2" border>

                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">就诊日期:</div>
                    </template>
                    {{ doctorInfo?.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">就诊医院:</div>
                    </template>
                    {{ doctorInfo?.param.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">就诊科室:</div>
                    </template>
                    {{ doctorInfo?.param.depname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">医生姓名:</div>
                    </template>
                    {{ doctorInfo?.docname }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">医生职务:</div>
                    </template>
                    {{ doctorInfo?.title }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">医生专长:</div>
                    </template>
                    {{ doctorInfo?.skill }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template #label>
                        <div class="cell-item">医事服务费:</div>
                    </template>
                    <span style="color: red;">{{ doctorInfo?.amount }}</span>
                </el-descriptions-item>

            </el-descriptions>

        </el-card>
        <!-- 确定挂号按钮 -->
        <div class="btn">
            <el-button type="primary" size="default" :disabled="currentIndex == -1 ? true : false"
                @click="submitOrder" >确定挂号</el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reqGetUser, reqDoctorInfo } from '@/api/hospital';
import {reqSubmitOrder} from '@/api/user/index'
import type { UserResponseData, UserArr, Doctor, DoctorInfoData } from '@/api/hospital/type'
import type {SubmitOrder} from '@/api/user/type'
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
// @ts-ignore
import { ElMessage } from 'element-plus';

// 获取路由数据
let $route = useRoute()
// 获取路由
let $router = useRouter()

// 存储用户确定就诊人的信息
let currentIndex = ref<number>(-1)

// 存储全部就诊人的信息
let userArr = ref<UserArr>([])

// 存储医生信息
let doctorInfo = ref<Doctor>()

// 引入获取就诊人信息接口
onMounted(() => {
    fenchUserData()
    fenchDoctorInfo()
})

// 获取就诊人信息
const fenchUserData = async () => {
    // 获取就诊人信息
    const result: UserResponseData = await reqGetUser()
    if (result.code == 200) {
        userArr.value = result.data
    }

}

// 获取医生信息
const fenchDoctorInfo = async () => {
    const result: DoctorInfoData = await reqDoctorInfo($route.query.docId as string)
    if (result.code == 200) {
        doctorInfo.value = result.data
    }


}

// 点击就诊人子组件的回调
const changeIndex = (index: number) => {
    // 储存当前用户选中就诊人信息索引值
    currentIndex.value = index
}

// 跳转到user路由
const submitOrder = async() => {
    // 医院编号
    let hoscode = doctorInfo.value?.hoscode
    // 医生id
    let scheduleId = doctorInfo.value?.id
    //就诊人的id
    let patientId = userArr.value[currentIndex.value].id

    // 提交订单
    let result:SubmitOrder = await reqSubmitOrder(hoscode as string,scheduleId as string,patientId)
    console.log(result);
    
    if(result.code == 200){
        $router.push({ path: '/user/order',query:{orderId:result.data} })

    }else{
        ElMessage({
            type:'error',
            message:result.message
        })
    }
    // $router.push({ path: '/user/order' })

    
}

// 预约挂号添加就诊人按钮的方法
const goUser = ()=>{
    // 路由跳转
    $router.push({path:'/user/patient',query:{type:'add'}})
}

</script>

<style scoped lang="scss">
.container {
    .tip {
        font-weight: 900;
        color: #7f7f7f;
        font-size: 20px;

    }

    .box-card {
        margin: 20px 0;

        .card-header {
            display: flex;
            justify-content: space-between;
        }

        .user {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .item {
                width: 32%;
                margin: 10px 0;
            }
        }
    }

    .btn {
        display: flex;
        justify-content: center;
        margin: 10px 0;
    }
}
</style>